import React, { createContext, ReactNode } from 'react'
import styles from './App.module.css'

// 1. 创建Context对象，并指定默认值的类型
const { Provider, Consumer } = createContext<string>('default value')

// 3. 消费数据
function ComC() {
  return (
    <div className={styles.three}>
      <Consumer>{(value) => <div>{value}</div>}</Consumer>
    </div>
  )
}

function ComA() {
  return (
    <div className={styles.two}>
      <ComC />
    </div>
  )
}

// 2. 提供数据
export class Header extends React.Component {
  state = {
    message: '孙子',
  }
  render() {
    console.log('父组件', this)
    const { message } = this.state
    return (
      <Provider value={message}>
        <div className={styles.one}>
          <ComA />
        </div>
      </Provider>
    )
  }
}
